<template>
  <div class="tab-bar-item" @click="itemClick" :class="{'active':isActive}">
    <div class="item-icon">
      <slot name="item-icon"></slot>
      <slot name="item-count"></slot>
    </div>
    <div class="item-name">
      <slot name="item-name"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'tabBarItem',
  data() {
    return {
    }
  },
  props: {
    path: {
      type: String,
      default: ''
    }
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) != -1
    }
  },
  methods: {
    // 点击跳转页面
    itemClick() {
      if (this.$route.path.indexOf(this.path) == -1) {
        this.$router.push(this.path).catch(() => { })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.tab-bar-item {
  flex: 1;
  position: relative;
  color: rgb(102, 102, 102);
  .item-icon {
    font-size: 22px;
    font-weight: 700;
    height: 20px;
    margin-top: -10px;
  }
  .item-name {
    color: #333;
    margin-top: 2px;
  }
}

.active {
  span {
    color: rgba(238, 92, 92, 0.774);
  }
}
</style>
